<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function addEle() {
				// 1.定位父元素
				var div = document.getElementsByTagName('div')[1]
				// 2.使用html文本替换
				var oldHtml = div.innerHTML
				div.innerHTML = oldHtml + 
				"<span style='color: red;'>新增的标签</span>"
				// 3.创建新的标签对象
				var new_p = document.createElement('p')
				new_p.id = 'p1'
				new_p.className = 'xyz'
				new_p.innerText = '创建的p标签对象'
				// 4.父元素追加子元素到尾部
				// div.append(new_p)
				div.appendChild(new_p)
				// 创建文本节点
				var textNode = document.createTextNode("纯文本")
				div.append(textNode)
				//div.appendChild(textNode)
			}
		</script>
	</head>
	<body>
		<button onclick="addEle()">增加元素</button>
		<div id="div1" class="aaa">
			第一个div标签
			<p>第一个div中的p标签</p>
			<p>第一个div中的p标签2</p>
			<a>第一个div中的a标签</a>
			第一个div标签的尾部文本
		</div>
		<div>第二个div</div>
		<p class="aaa">第二个p标签</p>
		<p class="aaa">第三个p标签</p>
		<p>第四个p标签</p>
		<p class="aaa">第五个p标签</p>
		<p>第六个p标签</p>
	</body>
</html>